<div class="pager">
    <ul>
        <li>
            <a href="{{url_base}}"><span>Primera</span></a>
        </li>
        <li>
            {% if page >2 %}
                <a href="{{url_base}}{{page-1}}/"><span>Anterior</span></a>
            {% else %}
                <a href="{{url_base}}"><span>Anterior</span></a>
            {% endif %}
        </li>

        {% if cant_pag > 10 %}
            {% if page > (10/2+2) %}

                {%set hasta = page+4%}
                {%if hasta > cant_pag%}
                    {%set hasta = cant_pag%}
                {% endif %}
                
                {% set paginas = range(page - 5, hasta) %}

            {% else %}
                {% set paginas = range(1, 10) %}
            {% endif %}

        {% else %}
            {% set paginas = range(1, cant_pag) %}
        {% endif %}

        {% for i in paginas %}
            <li>
                {%if i != page%}
                    {%if i == 1%}
                        <a href="{{url_base}}"><span>{{i}}</span></a>
                    {%else%}
                        <a href="{{url_base}}{{i}}/"><span>{{i}}</span></a>
                    {%endif%}
                {%else%}
                    <span class="actual">{{i}}</span>
                {%endif%}
            </li>
        {% endfor %}

        <li>
            {% if page < cant_pag-1 %}
                <a href="{{url_base}}{{page+1}}/"><span>Proxima</span></a>
            {% else %}
                <a href="{{url_base}}{{cant_pag}}/"><span>Proxima</span></a>
            {% endif %}
        </li>
        <li>
            <a href="{{url_base}}{{cant_pag}}/"><span>Ultima</span></a>
        </li>
    </ul>

    
</div>